<template>
    <ul class="wrapper">
        <!-- 遍历 router 菜单数据 -->
        <menu-item :key="index" v-for="(item, index) in menu_data">
            <!-- 对于没有 children 子菜单的 item -->
            <span class="item-title" v-if="!item.children">{{item.name}}</span>

            <!-- 对于有 children 子菜单的 item -->
            <template v-else>
                <span @click="handleToggleShow">{{item.name}}</span>
                <!-- 递归操作 -->
                <menu :router="item.children" v-if="toggleShow"></menu>
            </template>
        </menu-item>
    </ul>
</template>

<script>
    import MenuItem from "./MenuItem";

    export default {
        name: "Menu",
        props: ["router"], // Menu 组件接受一个 router 作为菜单数据
        components: { MenuItem },
        data() {
            return {
                toggleShow: false, // toggle 状态
                menu_data:[
                    {
                        name: "About",
                        path: "/about",
                        children: [
                            {
                                name: "About US",
                                path: "/about/us"
                            },
                            {
                                name: "About Comp",
                                path: "/about/company",
                                children: [
                                    {
                                        name: "About Comp A",
                                        path: "/about/company/A",
                                        children: [
                                            {
                                                name: "About Comp A 1",
                                                path: "/about/company/A/1"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                    ]
            };
        },
        methods: {
            handleToggleShow() {
                // 处理 toggle 状态的是否展开子菜单 handler
                this.toggleShow = !this.toggleShow;
            }
        }
    };
</script>

<style scoped>
    .wrapper {
        cursor: pointer;
    }
    .item-title {
        font-size: 16px;
    }
</style>